<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享米宝管理后台 - 设备管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100">
    <div class="admin-container flex">
        <!-- Sidebar -->
        <div class="w-64 bg-gray-800 min-h-screen flex-shrink-0">
            <div class="p-4 text-white">
                <div class="flex items-center mb-6">
                    <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                    <span class="text-lg font-medium">共享米宝管理系统</span>
                </div>
                
                <nav>
                    <a href="index.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-chart-line mr-2"></i> 控制台
                    </a>
                    <a href="users.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-users mr-2"></i> 用户管理
                    </a>
                    <a href="investors.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-user-tie mr-2"></i> 投资人管理
                    </a>
                    <a href="devices.html" class="block py-2 px-4 rounded bg-gray-700 mb-1">
                        <i class="fas fa-battery-full mr-2"></i> 设备管理
                    </a>
                    <a href="revenue.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-money-bill-wave mr-2"></i> 收益管理
                    </a>
                    <a href="commission-settings.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-cog mr-2"></i> 分润设置
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-grow">
            <!-- Header -->
            <header class="bg-white shadow-sm">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <h1 class="text-xl font-medium">设备管理</h1>
                    <div class="flex items-center">
                        <span class="mr-4">管理员</span>
                        <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/40" alt="管理员头像">
                    </div>
                </div>
            </header>

            <!-- Page content -->
            <main class="container mx-auto p-4">
                <!-- Device Stats -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500 text-sm">设备总数</p>
                                <h3 class="text-2xl font-bold mt-1">320</h3>
                            </div>
                            <div class="bg-blue-100 p-3 rounded-full">
                                <i class="fas fa-battery-full text-blue-500"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500 text-sm">已绑定设备</p>
                                <h3 class="text-2xl font-bold mt-1">284</h3>
                            </div>
                            <div class="bg-green-100 p-3 rounded-full">
                                <i class="fas fa-link text-green-500"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500 text-sm">未绑定设备</p>
                                <h3 class="text-2xl font-bold mt-1">36</h3>
                            </div>
                            <div class="bg-yellow-100 p-3 rounded-full">
                                <i class="fas fa-unlink text-yellow-500"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500 text-sm">累计收益</p>
                                <h3 class="text-2xl font-bold mt-1">¥68,432</h3>
                            </div>
                            <div class="bg-purple-100 p-3 rounded-full">
                                <i class="fas fa-money-bill-wave text-purple-500"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Search and Filter -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <!-- Search by Device -->
                        <div class="flex-grow min-w-[250px]">
                            <label class="block text-sm text-gray-600 mb-1">设备搜索</label>
                            <div class="flex">
                                <input type="text" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="设备SN/类型">
                                <button class="bg-blue-500 text-white px-4 py-2 rounded-r-md">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Filter by Binding Status -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">绑定状态</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部</option>
                                <option value="bound">已绑定</option>
                                <option value="unbound">未绑定</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Device List -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-medium">设备列表</h2>
                        <div class="flex gap-2">
                            <button id="import-devices-btn" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm flex items-center">
                                <i class="fas fa-file-import mr-2"></i>
                                批量导入
                            </button>
                            <button id="add-device-btn" class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm flex items-center">
                                <i class="fas fa-plus mr-2"></i>
                                添加设备
                            </button>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备SN</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">投资人</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">激活时间</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">累计收益</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB12345</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="flex items-center">
                                            <img class="h-6 w-6 rounded-full mr-2" src="https://via.placeholder.com/30" alt="投资人头像">
                                            <div>
                                                <div class="text-sm font-medium">张志强</div>
                                                <div class="text-xs text-gray-500">UID: U20230402</div>
                                                <div class="text-xs text-gray-500">手机: 13866668888</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥458.20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB12345">详情</a>
                                        <a href="#" class="text-blue-500 unbind-device-btn" data-device="MB12345">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB12346</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="flex items-center">
                                            <img class="h-6 w-6 rounded-full mr-2" src="https://via.placeholder.com/30" alt="投资人头像">
                                            <div>
                                                <div class="text-sm font-medium">张志强</div>
                                                <div class="text-xs text-gray-500">UID: U20230402</div>
                                                <div class="text-xs text-gray-500">手机: 13866668888</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥387.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB12346">详情</a>
                                        <a href="#" class="text-blue-500 unbind-device-btn" data-device="MB12346">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB12347</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="flex items-center">
                                            <img class="h-6 w-6 rounded-full mr-2" src="https://via.placeholder.com/30" alt="投资人头像">
                                            <div>
                                                <div class="text-sm font-medium">张志强</div>
                                                <div class="text-xs text-gray-500">UID: U20230402</div>
                                                <div class="text-xs text-gray-500">手机: 13866668888</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥245.80</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB12347">详情</a>
                                        <a href="#" class="text-blue-500 unbind-device-btn" data-device="MB12347">解绑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">MB56789</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">--</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">--</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">¥0.00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="#" class="text-blue-500 mr-3 device-detail-btn" data-device="MB56789">详情</a>
                                        <a href="#" class="text-blue-500 bind-device-btn" data-device="MB56789">绑定投资人</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="text-sm text-gray-500">
                            显示 1-10 条，共 320 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-500 text-white">
                                1
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                2
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                3
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                4
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                5
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Add Device Modal -->
                <div id="add-device-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">添加设备</h3>
                            <button id="close-add-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">设备号录入</label>
                                <div class="mb-2">
                                    <textarea id="device-ids" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="输入设备SN，多个设备SN请用逗号、空格或换行分隔"></textarea>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xs text-gray-500">已输入: <span id="device-count">0</span> 台设备</div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">投资人 (选填)</label>
                                <div class="flex">
                                    <input type="text" id="investor-search" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入UID/手机号">
                                    <button id="search-investor-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <div id="investor-info" class="mt-2 p-2 border border-gray-300 rounded-md hidden">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full mr-2" src="https://via.placeholder.com/32" alt="投资人头像">
                                        <div>
                                            <div class="text-sm font-medium" id="selected-investor-name">未选择投资人</div>
                                            <div class="text-xs text-gray-500" id="selected-investor-id">UID: -</div>
                                            <div class="text-xs text-gray-500" id="selected-investor-phone">手机: -</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button id="cancel-add-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    取消
                                </button>
                                <button id="save-device-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Import Devices Modal -->
                <div id="import-devices-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">批量导入设备</h3>
                            <button id="close-import-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">上传Excel文件</label>
                                <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center">
                                    <input type="file" class="hidden" id="file-input" accept=".xlsx, .xls, .csv">
                                    <label for="file-input" class="cursor-pointer">
                                        <div class="mb-2">
                                            <i class="fas fa-file-excel text-green-500 text-2xl"></i>
                                        </div>
                                        <div class="text-sm text-gray-600">点击上传或拖拽文件至此处</div>
                                        <div class="text-xs text-gray-500 mt-1">支持 .xlsx, .xls, .csv 格式</div>
                                    </label>
                                </div>
                                <div id="file-name" class="mt-2 text-sm"></div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">下载模板</label>
                                <a href="#" class="text-blue-500 text-sm flex items-center">
                                    <i class="fas fa-download mr-1"></i>
                                    <span>设备导入模板.xlsx</span>
                                </a>
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button id="cancel-import-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    取消
                                </button>
                                <button id="upload-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Device Detail Modal -->
                <div id="device-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">设备详情</h3>
                            <button id="close-detail-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-4 rounded-lg flex items-center">
                                <div class="bg-blue-100 p-3 rounded-full mr-3">
                                    <i class="fas fa-battery-full text-blue-500"></i>
                                </div>
                                <div>
                                    <div id="device-id-display" class="font-medium text-lg">设备SN: MB12345</div>
                                    <div id="device-type" class="text-gray-600 text-sm">类型: 标准充电宝+WiFi</div>
                                </div>
                            </div>
                            
                            <div class="border-t pt-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <div class="text-sm text-gray-500">投资人</div>
                                        <div id="device-investor" class="font-medium">张志强</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">绑定时间</div>
                                        <div id="device-activation" class="font-medium">2023-04-20</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">状态</div>
                                        <div id="device-status" class="font-medium text-green-600">正常</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">电量</div>
                                        <div id="device-battery" class="font-medium">95%</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">使用次数</div>
                                        <div id="device-usage-count" class="font-medium">48次</div>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">累计收益</div>
                                        <div id="device-total-revenue" class="font-medium text-green-600">¥458.20</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="border-t pt-4 flex justify-end space-x-2">
                                <button id="close-detail-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    关闭
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bind Investor Modal -->
                <div id="bind-investor-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">绑定投资人</h3>
                            <button id="close-bind-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="bg-blue-50 p-3 rounded-lg">
                                <div class="flex items-center">
                                    <div class="bg-blue-100 p-2 rounded-full mr-2">
                                        <i class="fas fa-mobile-alt text-blue-500"></i>
                                    </div>
                                    <div>
                                        <div id="bind-device-id" class="font-medium">设备SN: MB56789</div>
                                        <div class="text-sm text-gray-600">标准充电宝+WiFi</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">选择投资人</label>
                                <div class="flex">
                                    <input type="text" id="bind-investor-search" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入UID/手机号">
                                    <button id="search-bind-investor-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <div id="bind-investor-info" class="mt-2 p-2 border border-gray-300 rounded-md hidden">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full mr-2" src="https://via.placeholder.com/32" alt="投资人头像">
                                        <div>
                                            <div class="text-sm font-medium" id="bind-selected-investor-name">未选择投资人</div>
                                            <div class="text-xs text-gray-500" id="bind-selected-investor-id">UID: -</div>
                                            <div class="text-xs text-gray-500" id="bind-selected-investor-phone">手机: -</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button id="cancel-bind-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    取消
                                </button>
                                <button id="confirm-bind-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    绑定
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript for functionality -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add Device Modal
            const addDeviceBtn = document.getElementById('add-device-btn');
            const addDeviceModal = document.getElementById('add-device-modal');
            const closeAddModal = document.getElementById('close-add-modal');
            const cancelAddBtn = document.getElementById('cancel-add-btn');
            const deviceIdsTextarea = document.getElementById('device-ids');
            const deviceCountElement = document.getElementById('device-count');
            const investorSearch = document.getElementById('investor-search');
            const searchInvestorBtn = document.getElementById('search-investor-btn');
            const investorInfo = document.getElementById('investor-info');
            const selectedInvestorName = document.getElementById('selected-investor-name');
            const selectedInvestorId = document.getElementById('selected-investor-id');
            const selectedInvestorPhone = document.getElementById('selected-investor-phone');
            const saveDeviceBtn = document.getElementById('save-device-btn');
            
            // Import Devices Modal
            const importDevicesBtn = document.getElementById('import-devices-btn');
            const importDevicesModal = document.getElementById('import-devices-modal');
            const closeImportModal = document.getElementById('close-import-modal');
            const cancelImportBtn = document.getElementById('cancel-import-btn');
            const uploadBtn = document.getElementById('upload-btn');
            const fileInput = document.getElementById('file-input');
            const fileName = document.getElementById('file-name');
            
            // Bind Investor Modal
            const bindInvestorModal = document.getElementById('bind-investor-modal');
            const closeBingModal = document.getElementById('close-bind-modal');
            const cancelBindBtn = document.getElementById('cancel-bind-btn');
            const bindDeviceId = document.getElementById('bind-device-id');
            const bindInvestorSearch = document.getElementById('bind-investor-search');
            const searchBindInvestorBtn = document.getElementById('search-bind-investor-btn');
            const bindInvestorInfo = document.getElementById('bind-investor-info');
            const bindSelectedInvestorName = document.getElementById('bind-selected-investor-name');
            const bindSelectedInvestorId = document.getElementById('bind-selected-investor-id');
            const bindSelectedInvestorPhone = document.getElementById('bind-selected-investor-phone');
            const confirmBindBtn = document.getElementById('confirm-bind-btn');
            
            // Device Detail Modal
            const deviceDetailModal = document.getElementById('device-detail-modal');
            const closeDetailModal = document.getElementById('close-detail-modal');
            const closeDetailBtn = document.getElementById('close-detail-btn');
            const deviceIdDisplay = document.getElementById('device-id-display');
            const deviceType = document.getElementById('device-type');
            const deviceInvestor = document.getElementById('device-investor');
            const deviceActivation = document.getElementById('device-activation');
            const deviceStatus = document.getElementById('device-status');
            const deviceBattery = document.getElementById('device-battery');
            const deviceUsageCount = document.getElementById('device-usage-count');
            const deviceTotalRevenue = document.getElementById('device-total-revenue');
            
            // 设备ID输入处理
            deviceIdsTextarea.addEventListener('input', updateDeviceCount);
            
            function updateDeviceCount() {
                const text = deviceIdsTextarea.value.trim();
                if (!text) {
                    deviceCountElement.textContent = '0';
                    return;
                }
                
                // 分割设备ID - 支持逗号、空格、换行符分隔
                const deviceIds = text.split(/[\s,，]+/).filter(d => d.trim() !== '');
                deviceCountElement.textContent = deviceIds.length.toString();
            }
            
            // 投资人搜索功能
            searchInvestorBtn.addEventListener('click', function() {
                const searchValue = investorSearch.value.trim();
                if (!searchValue) {
                    alert('请输入UID或手机号');
                    return;
                }
                
                // 模拟API调用
                console.log(`搜索投资人: ${searchValue}`);
                // 实际项目中应该调用后端API查询投资人
                setTimeout(() => {
                    // 模拟找到投资人
                    investorInfo.classList.remove('hidden');
                    selectedInvestorName.textContent = `投资人_${searchValue}`;
                    selectedInvestorId.textContent = `UID: ${searchValue}`;
                    selectedInvestorPhone.textContent = `手机: 139${Math.floor(Math.random() * 10000000).toString().padStart(8, '0')}`;
                }, 300);
            });
            
            // 绑定投资人搜索功能
            searchBindInvestorBtn.addEventListener('click', function() {
                const searchValue = bindInvestorSearch.value.trim();
                if (!searchValue) {
                    alert('请输入UID或手机号');
                    return;
                }
                
                // 模拟API调用
                console.log(`搜索投资人: ${searchValue}`);
                // 实际项目中应该调用后端API查询投资人
                setTimeout(() => {
                    // 模拟找到投资人
                    bindInvestorInfo.classList.remove('hidden');
                    bindSelectedInvestorName.textContent = `投资人_${searchValue}`;
                    bindSelectedInvestorId.textContent = `UID: ${searchValue}`;
                    bindSelectedInvestorPhone.textContent = `手机: 139${Math.floor(Math.random() * 10000000).toString().padStart(8, '0')}`;
                }, 300);
            });
            
            // Show/Hide Add Device Modal
            addDeviceBtn.addEventListener('click', function() {
                resetAddDeviceForm();
                addDeviceModal.classList.remove('hidden');
            });
            
            function hideAddDeviceModal() {
                addDeviceModal.classList.add('hidden');
                resetAddDeviceForm();
            }
            
            closeAddModal.addEventListener('click', hideAddDeviceModal);
            cancelAddBtn.addEventListener('click', hideAddDeviceModal);
            
            // 重置添加设备表单
            function resetAddDeviceForm() {
                deviceIdsTextarea.value = '';
                updateDeviceCount();
                
                investorSearch.value = '';
                investorInfo.classList.add('hidden');
                selectedInvestorName.textContent = '未选择投资人';
                selectedInvestorId.textContent = 'UID: -';
                selectedInvestorPhone.textContent = '手机: -';
            }
            
            // 保存设备
            saveDeviceBtn.addEventListener('click', function() {
                // 判断是否输入了设备ID
                const deviceIds = deviceIdsTextarea.value.trim();
                if (!deviceIds) {
                    alert('请输入至少一个设备SN');
                    return;
                }
                
                // 获取表单数据
                const deviceData = {
                    deviceIds: deviceIds.split(/[\s,，]+/).filter(d => d.trim() !== ''),
                    investor: investorInfo.classList.contains('hidden') ? null : {
                        id: selectedInvestorId.textContent.replace('UID: ', ''),
                        name: selectedInvestorName.textContent,
                        phone: selectedInvestorPhone.textContent.replace('手机: ', '')
                    }
                };
                
                console.log('保存设备数据:', deviceData);
                // 实际项目中应该调用后端API保存数据
                alert(`成功添加 ${deviceData.deviceIds.length} 台设备！`);
                hideAddDeviceModal();
            });
            
            // Show/Hide Import Devices Modal
            importDevicesBtn.addEventListener('click', function() {
                importDevicesModal.classList.remove('hidden');
            });
            
            function hideImportModal() {
                importDevicesModal.classList.add('hidden');
                fileName.textContent = '';
                fileInput.value = '';
            }
            
            closeImportModal.addEventListener('click', hideImportModal);
            cancelImportBtn.addEventListener('click', hideImportModal);
            
            // 上传按钮点击事件
            uploadBtn.addEventListener('click', function() {
                if (!fileInput.files || fileInput.files.length === 0) {
                    alert('请先选择文件');
                    return;
                }
                
                // 模拟上传处理
                alert('开始上传文件并导入设备...');
                // 实际项目中应该调用后端API上传文件并处理导入
                setTimeout(() => {
                    alert('成功导入 128 台设备！');
                    hideImportModal();
                }, 1500);
            });
            
            // File input change
            fileInput.addEventListener('change', function() {
                if (this.files.length > 0) {
                    fileName.textContent = `已选择: ${this.files[0].name}`;
                }
            });
            
            // Bind Investor Buttons
            const bindDeviceBtns = document.querySelectorAll('.bind-device-btn');
            bindDeviceBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const deviceId = this.getAttribute('data-device');
                    console.log(`绑定投资人: ${deviceId}`);
                    
                    // 显示绑定模态框
                    bindDeviceId.textContent = `设备SN: ${deviceId}`;
                    resetBindInvestorForm();
                    bindInvestorModal.classList.remove('hidden');
                });
            });
            
            // 绑定投资人表单重置
            function resetBindInvestorForm() {
                bindInvestorSearch.value = '';
                bindInvestorInfo.classList.add('hidden');
                bindSelectedInvestorName.textContent = '未选择投资人';
                bindSelectedInvestorId.textContent = 'UID: -';
                bindSelectedInvestorPhone.textContent = '手机: -';
            }
            
            // 隐藏绑定投资人模态框
            function hideBindInvestorModal() {
                bindInvestorModal.classList.add('hidden');
                resetBindInvestorForm();
            }
            
            closeBingModal.addEventListener('click', hideBindInvestorModal);
            cancelBindBtn.addEventListener('click', hideBindInvestorModal);
            
            // 确认绑定按钮
            confirmBindBtn.addEventListener('click', function() {
                if (bindInvestorInfo.classList.contains('hidden')) {
                    alert('请先选择投资人');
                    return;
                }
                
                const deviceId = bindDeviceId.textContent.replace('设备SN: ', '');
                const investorId = bindSelectedInvestorId.textContent.replace('UID: ', '');
                const investorName = bindSelectedInvestorName.textContent;
                
                console.log(`绑定设备 ${deviceId} 到投资人 ${investorName} (${investorId})`);
                // 实际项目中应该调用后端API进行绑定
                alert(`设备 ${deviceId} 已成功绑定到投资人 ${investorName}`);
                hideBindInvestorModal();
                
                // 刷新页面以显示新的绑定关系
                // 实际项目中应该通过AJAX刷新表格数据
                setTimeout(() => {
                    location.reload();
                }, 500);
            });
            
            // Unbind Device Buttons
            const unbindDeviceBtns = document.querySelectorAll('.unbind-device-btn');
            unbindDeviceBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const deviceId = this.getAttribute('data-device');
                    
                    if (confirm(`确定要解绑设备 ${deviceId} 吗？`)) {
                        console.log(`解绑设备: ${deviceId}`);
                        // 实际项目中应该调用后端API进行解绑
                        alert(`设备 ${deviceId} 已成功解绑`);
                        
                        // 刷新页面以显示新的绑定关系
                        // 实际项目中应该通过AJAX刷新表格数据
                        setTimeout(() => {
                            location.reload();
                        }, 500);
                    }
                });
            });
            
            // Show Device Detail
            const deviceDetailBtns = document.querySelectorAll('.device-detail-btn');
            deviceDetailBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const deviceId = this.getAttribute('data-device');
                    showDeviceDetail(deviceId);
                });
            });
            
            // Show device detail
            function showDeviceDetail(deviceId) {
                console.log(`显示设备详情: ${deviceId}`);
                
                // 更新详情模态框内容
                deviceIdDisplay.textContent = `设备SN: ${deviceId}`;
                
                // 假设我们从行中获取投资人信息
                const row = document.querySelector(`[data-device="${deviceId}"]`).closest('tr');
                const investorCell = row.querySelector('td:nth-child(2)');
                const investorText = investorCell.textContent.trim();
                
                // 在实际项目中应该通过API获取详细信息
                if (investorText === '--') {
                    deviceInvestor.textContent = '未绑定';
                    deviceActivation.textContent = '--';
                } else {
                    deviceInvestor.textContent = investorCell.querySelector('.text-sm.font-medium').textContent;
                    deviceActivation.textContent = row.querySelector('td:nth-child(3)').textContent;
                }
                
                // 设置其他信息
                deviceType.textContent = `类型: 标准充电宝`;
                deviceStatus.textContent = '正常';
                deviceBattery.textContent = '95%';
                deviceUsageCount.textContent = '48次';
                deviceTotalRevenue.textContent = row.querySelector('td:nth-child(4)').textContent;
                
                // 显示模态框
                deviceDetailModal.classList.remove('hidden');
            }
            
            // Hide device detail
            function hideDeviceDetail() {
                deviceDetailModal.classList.add('hidden');
            }
            
            closeDetailModal.addEventListener('click', hideDeviceDetail);
            closeDetailBtn.addEventListener('click', hideDeviceDetail);
        });
    </script>
</body>
</html> 